<template>
    <div>
        <div class="search-container">
            <el-input v-model="keywords" class="searchInp" size="small" prefix-icon="el-icon-search" placeholder="通过用户名搜索用户..." @keydown.enter.native="search" >
            </el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search" >搜索</el-button>
        </div>
        <div class="card-container">
            <el-card class="box-card card-sty" v-for="(hr,index) in hrs" :key="index">
                <div slot="header" class="clearfix">
                    <span>{{hr.name}}</span>
                    <el-button @click="deleteHr(hr)" style="float: right; padding: 3px 0;color: red" icon="el-icon-delete"  type="text">
                    </el-button>
                </div>
                <div>
                    <div class="img-container">
                        <img :src="hr.userFace" :alt="hr.name" :title="hr.name" class="img-sty"/>
                    </div>
                    <div class="info-container">
                        <div>用户名: {{hr.name}}</div>
                        <div>手机号码: {{hr.phone}}</div>
                        <div>电话号码: {{hr.telephone}}</div>
                        <div>地址: {{hr.address}}</div>
                        <div>
                            用户状态:
                            <el-switch
                                    v-model="hr.enabled"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="启用"
                                    inactive-text="禁用"
                                    @change="enabledChange(hr)">
                            </el-switch>
                        </div>
                        <div>
                            用户角色:
                            <el-tag size="small" class="role-sty" type="success" v-for="(role,rindex) in hr.roles" :key="rindex">
                                {{role.nameZh}}
                            </el-tag>

                            <el-popover
                                    placement="bottom"
                                    title="角色列表"
                                    width="200"
                                    @show="showPop(hr)"
                                    @hide="hidePop(hr)"
                                    trigger="click">
                                <div>
                                    <el-select v-model="selectedRole" multiple placeholder="请选择">
                                        <el-option
                                                v-for="(r,i) in allRoles"
                                                :key="i"
                                                :label="r.nameZh"
                                                :value="r.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <el-button slot="reference" size="small" type="text" icon="el-icon-more">
                                </el-button>
                            </el-popover>
                        </div>
                        <div>备注: {{hr.remark}}</div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysHr",
        data(){
            return{
                keywords:'',
                hrs:[],
                selectedRole:[],
                allRoles:[],
            }
        },
        mounted() {
            this.initHrs();
        },
        methods:{

            // 消失的时候需要做修改操作
            hidePop(hr){
                // 当hr.roles与隐藏时selectRoles一致的时候  不需要发送修改请求
                let roles = [];
                Object.assign(roles,hr.roles);
                let selectedRole = this.selectedRole;
                let flag = false;
                // 长度不相等时 修改
                if(roles.length != selectedRole.length){
                    flag=true;
                }else {
                    for(let i=0;i<roles.length;i++){
                        let role = roles[i];
                        for(let j=0;j<selectedRole.length;j++){
                            if(selectedRole[j]==role.id){
                                roles.splice(i,1);
                                i--;
                                break;
                            }
                        }
                    }
                    if(roles.length!=0){
                        flag=true;
                    }
                }

                if(flag){
                    // 修改角色hr关系表
                    let url = "/system/hr/updateHrRole?hrId="+hr.id;
                    // 参数hrid,roleids=selectenRole
                    this.selectedRole.forEach(roleId=>{
                        url+="&roleIds="+roleId;
                    });

                    this.putRequest(url).then(resp=>{
                        if(resp){
                            this.initHrs();
                        }
                    })
                }
            },
            // 弹出框出现时候
            showPop(hr){
                // 获取所有的角色
                this.getAllRoles();
                // 获取当前hr的角色
                let roles = hr.roles;
                // 将select选中的list置空
                this.selectedRole = [];
                // 循环放入hr的角色id 用于预选中
                roles.forEach(role=>{
                    this.selectedRole.push(role.id)
                })
            },
            // 获取所有的角色
            getAllRoles(){
                this.getRequest("/system/hr/getAllRoses").then(resp=>{
                    if(resp){
                        this.allRoles=resp.data;
                    }
                })
            },
            initHrs(){
                this.getRequest("/system/hr/").then(resp=>{
                    if(resp){
                        this.hrs=resp.data
                    }
                })
            },
            enabledChange(hr){
                this.putRequest("/system/hr/enabled",hr).then(resp=>{
                    if(resp){
                        this.initHrs();
                    }
                })
            },
            search(){
                this.getRequest("/system/hr/?keywords="+this.keywords).then(resp=>{
                    if(resp){
                        this.hrs=resp.data
                    }
                })
            },
            deleteHr(hr){
                this.$confirm('此操作将永久删除['+hr.name+'], 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/hr/"+hr.id).then(resp=>{
                        if(resp){
                            this.initHrs();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style>
    .role-sty{
        margin-right: 4px;
    }
    .info-container{
        margin-top: 10px;
    }
    .info-container span{
        font-size: 12px;
    }
    .info-container div{
        font-size: 12px;
        color: royalblue;
        margin-bottom: 3px;
    }
    .img-container{
        display: flex;
        justify-content: center;
    }
    .img-sty{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .card-container{
        margin-top: 20px;
        display: flex;
        /*自动换行*/
        flex-wrap: wrap;
        /*平均分配剩余空间*/
        justify-content: space-around;
    }
    .card-sty{
        width: 300px;
        margin-bottom: 10px;
    }
    .search-container{
        display: flex;
        justify-content: center;
    }
    .searchInp{
        width: 400px;
        margin-right: 10px;
    }
</style>